#outer{
  /*height:500px;*/
  border: 1px dashed red;
  display: inline-block;
}

#inner{
  display:inline-block;
  border: 1px dashed red;
  position: fixed;
  top: 50px;
  left: 50px;
}

/*tip共用样式*/
.tip{
  padding: 20px;
  background:#F3961C;
  font-size: 14px;
  display: inline;
  display: inline-block;
  position:relative;
}
span.tail-bottom, span.tail-top{
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  position: absolute;
}

/*带直角尾巴*/
/*top*/
.tip-zhi-top{
  margin-bottom: 16px;
}
.tip-zhi-top span.tail-bottom{
  border-width: 16px;
  border-style: solid dashed dashed;
  border-color: #f3961c transparent transparent;
  /*_border-color: #f3961c white white;*/
  left: 20px;
  bottom: -32px;
}
/*right*/
.tip-zhi-right{
  margin-left: 16px;
}
.tip-zhi-right span.tail-bottom{
  border-width: 16px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #f3961c transparent transparent;
  /*_border-color: #f3961c white white;*/
  left: -32px;
  top: 12px;
}
/*bottom*/
.tip-zhi-bottom{
  margin-top: 16px;
}
.tip-zhi-bottom span.tail-bottom{
  border-width: 16px;
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent #f3961c transparent;
  /*_border-color: #f3961c white white;*/
  left: 20px;
  top: -32px;
}
/*left*/
.tip-zhi-left{
  margin-right: 16px;
}
.tip-zhi-left span.tail-bottom{
  border-width: 16px;
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent #f3961c;
  /*_border-color: #f3961c white white;*/
  right: -32px;
  top: 12px;
}

/*带尖角尾巴*/
/*top*/
.tip-jian-top{
  margin-bottom: 20px;
}
.tip-jian-top span.tail-bottom{
  border-width: 10px;
  border-style: solid solid dashed dashed;
  border-color: #f3961c #f3961c transparent transparent;
  /*_border-color: #f3961c white white;*/
  left: 20px;
  bottom: -20px;
}

/*right*/
.tip-jian-right{
  margin-left: 20px;
}
.tip-jian-right span.tail-bottom{
  border-width: 10px;
  border-style: dashed solid solid dashed;
  border-color: transparent #f3961c #f3961c transparent;
  /*_border-color: #f3961c white white;*/
  left: -20px;
  top: 10px;
}
/*bottom*/
.tip-jian-bottom{
  margin-top: 20px;
}
.tip-jian-bottom span.tail-bottom{
  border-width: 10px;
  border-style: dashed dashed solid solid;
  border-color: transparent transparent #f3961c #f3961c;
  /*_border-color: #f3961c white white;*/
  left: 20px;
  top: -20px;
}

/*left*/
.tip-jian-left{
  margin-right: 20px;
}
.tip-jian-left span.tail-bottom{
  border-width: 10px;
  border-style: solid dashed dashed solid;
  border-color: #f3961c transparent transparent #f3961c;
  /*_border-color: #f3961c white white;*/
  right: -20px;
  top: 10px;
}

/*带钝角尾巴(视觉上有瑕疵)*/
/*top*/
.tip-dun-top{
  /*margin-bottom: 40px;*/
  border-bottom: 40px solid #fff;
}
.tip-dun-top span.tail-bottom{
  border-width: 20px;
  border-style: solid solid dashed dashed;
  border-color: #beceeb #beceeb transparent transparent;
  left: 20px;
  bottom: -40px;
}
.tip-dun-top span.tail-top{
  border-width: 20px 10px;
  border-style: solid solid dashed dashed;
  border-color: #fff #fff transparent transparent;
  left: 40px;
  bottom: -40px;
}
/*right*/
.tip-dun-right{
  /*margin-left: 40px;*/
  border-left: 40px solid #fff;
}
.tip-dun-right span.tail-bottom{
  border-width: 20px;
  border-style: dashed solid solid dashed;
  border-color: transparent #beceeb #beceeb transparent;
  left: -40px;
  top: 20px;
}
.tip-dun-right span.tail-top{
  border-width: 10px 20px;
  border-style: dashed solid solid dashed;
  border-color: transparent #ffffff #ffffff transparent;
  left: -40px;
  top: 40px;
}
/*bottom*/
.tip-dun-bottom{
  /*margin-top: 40px;*/
  border-top: 40px solid #fff;
}
.tip-dun-bottom span.tail-bottom{
  border-width: 20px;
  border-style: dashed dashed solid solid;
  border-color: transparent transparent #beceeb #beceeb;
  left: 20px;
  top: -40px;
}
.tip-dun-bottom span.tail-top{
  border-width: 20px 10px;
  border-style: dashed dashed solid solid;
  border-color: transparent transparent #fff #fff;
  left: 20px;
  top: -40px;
}
/*left*/
.tip-dun-left{
  /*margin-right: 40px;*/
  border-right: 40px solid #fff;
}
.tip-dun-left span.tail-bottom{
  border-width: 20px;
  border-style: solid dashed dashed solid;
  border-color: #beceeb transparent transparent #beceeb;
  right: -40px;
  top: 0;
}
.tip-dun-left span.tail-top{
  border-width: 10px 20px;
  border-style: solid dashed dashed solid;
  border-color: #fff transparent transparent #fff;
  right: -40px;
  top: 0;
}

/*带直角尾巴样式2*/
/*top*/
.tip-zhi1-top{
  margin-bottom: 15px;
  border: 5px solid #beceeb;
}
.tip-zhi1-top span.tail-bottom{
  border-width: 20px;
  border-style: solid dashed dashed;
  border-color: #beceeb transparent transparent;
  left: 20px;
  bottom: -40px;
}
.tip-zhi1-top span.tail-top{
  border-width: 20px;
  border-style: solid dashed dashed;
  border-color: #ffffff transparent transparent;
  left: 20px;
  bottom: -33px;
}

/*right*/
.tip-zhi1-right{
  margin-left: 15px;
  border: 5px solid #beceeb;
}
.tip-zhi1-right span.tail-bottom{
  border-width: 20px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #beceeb transparent transparent;
  top: 11px;
  left: -40px;
}
.tip-zhi1-right span.tail-top{
  border-width: 20px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #fff transparent transparent;
  top: 11px;
  left: -33px;
}
/*bottom*/
.tip-zhi1-bottom{
  margin-top: 15px;
  border: 5px solid #beceeb;
}
.tip-zhi1-bottom span.tail-bottom{
  border-width: 20px;
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent #beceeb transparent;
  left: 20px;
  top: -40px;
}
.tip-zhi1-bottom span.tail-top{
  border-width: 20px;
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent #fff transparent;
  left: 20px;
  top: -33px;
}
/*left*/
.tip-zhi1-left{
  margin-right: 15px;
  border: 5px solid #beceeb;
}
.tip-zhi1-left span.tail-bottom{
  border-width: 20px;
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent #beceeb;
  top: 11px;
  right: -40px;
}
.tip-zhi1-left span.tail-top{
  border-width: 20px;
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent #fff;
  top: 11px;
  right: -33px;
}
/*带云朵状尾巴*/
.tip-pao-top span, .tip-pao-right span, .tip-pao-bottom span, .tip-pao-left span {
  background: #beceeb;
}
/*top*/
.tip-pao-top{
  width: 300px;
  padding: 80px 20px;
  border-radius: 220px / 120px;
  margin-bottom: 40px;
}
.tip-pao-top span.tail-bottom{
  width: 30px;
  height: 30px;
  border-radius: 30px;
  left: 10px;
  bottom: -20px;
}
.tip-pao-top span.tail-top{
  width: 15px;
  height: 15px;
  border-radius: 15px;
  left: 0;
  bottom: -40px;
}
/*right*/
.tip-pao-right{
  width: 300px;
  padding: 80px 20px;
  border-radius: 220px / 120px;
  margin-left: 40px;
}
.tip-pao-right span.tail-bottom{
  width: 30px;
  height: 30px;
  border-radius: 30px;
  top: 10px;
  left: -20px;
}
.tip-pao-right span.tail-top{
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: 0;
  left: -40px;
}
/*bottom*/
.tip-pao-bottom{
  width: 300px;
  padding: 80px 20px;
  margin-top: 40px;
  border-radius: 220px / 120px;
}
.tip-pao-bottom span.tail-bottom{
  width: 30px;
  height: 30px;
  border-radius: 30px;
  left: 10px;
  top: -20px;
}
.tip-pao-bottom span.tail-top{
  width: 15px;
  height: 15px;
  border-radius: 15px;
  left: 0px;
  top: -40px;
}
/*left*/
.tip-pao-left{
  width: 300px;
  padding: 80px 20px;
  border-radius: 220px / 120px;
  margin-right: 40px;
}
.tip-pao-left span.tail-bottom{
  width: 30px;
  height: 30px;
  border-radius: 30px;
  top: 10px;
  right: -20px;
}
.tip-pao-left span.tail-top{
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: 0;
  right: -40px;
}
